<script setup>
  // 双向数据绑定，控制弹出层的显示和隐藏
  const model = defineModel()
  const emit = defineEmits(['close', 'confirm'])
  const props = defineProps({
    // 距离顶部打开的距离
    top: {
      type: Number,
      default: 0
    },
    // 是否显示确定按钮
    showConfirmButton: {
      type: Boolean,
      default: true
    }
  })

  const onClose = () => {
    // 关闭弹出层
    model.value = false
    emit('close')
  }
</script>

<template>
  <view
    class="popup"
    :style="{ top: `${props.top}px` }"
    v-show="model"
  >
    <!-- 蒙版 -->
    <view
      class="popup-mask"
      @click="onClose"
    ></view>
    <!-- 主体内容 -->
    <view class="popup-main">
      <scroll-view
        class="popup-main-info"
        scroll-y
        :show-scrollbar="false"
      >
        <slot></slot>
      </scroll-view>
      <button
        v-if="props.showConfirmButton"
        class="btn-confirm"
        @click="emit('confirm', $event)"
      >
        确定
      </button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import '@/styles/variable.scss';
  .popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    // 遮罩层
    &-mask {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: var(--mask-bg-color);
    }
    // 主体内容
    &-main {
      box-sizing: border-box;
      position: relative;
      z-index: 2;
      width: 100%;
      max-height: 820rpx;
      min-height: 330rpx;
      padding: 0 34rpx 40rpx;
      background-color: #fff;
      border-radius: 0 0 30rpx 30rpx;
      &-info {
        max-height: 700rpx;
        min-height: 190rpx;
      }
      .btn-confirm {
        width: 682rpx;
        height: 80rpx;
        font-size: var(--font-size-md);
        border-radius: 16rpx;
        background-image: linear-gradient(to right, #22cfff, #0fa1fe);
        color: #fff;
      }
    }
  }
</style>
